<%@Page Language="VB"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Using Multiple Display Columns with a DataList Control</title>
<style type="text/css">
body, td {font-family:Tahoma,Arial,sans-serif; font-size:10pt}
input {font-family:Tahoma,Arial,sans-serif; font-size:9pt}
.heading {font-family:Tahoma,Arial,sans-serif; font-size:14pt; font-weight:bold}
.subhead {font-family:Tahoma,Arial,sans-serif; font-size:12pt; font-weight:bold; padding-bottom:5px}
.cite {font-family:Tahoma,Arial,sans-serif; font-size:8pt}

.rHead {font-family:Lucida Handwriting,Comic Sans MS,Tahoma,Arial;
        font-size:14pt; font-weight:bold; padding:8px; color:green}
.rFoot {font-family:Tahoma,Arial; font-size:8pt; padding:8px; color:darkgray}

</style></head>
<body bgcolor="#ffffff">
<span class="heading">Using Multiple Display Columns with a DataList Control</span><hr />
<!--------------------------------------------------------------------------->

<form runat="server">
  Number of Columns:
  <ASP:RadioButton id="Cols1" GroupName="Cols" AutoPostback="True" runat="server" /> One &nbsp;
  <ASP:RadioButton id="Cols2" GroupName="Cols" AutoPostback="True" runat="server" /> Two &nbsp;
  <ASP:RadioButton id="Cols3" GroupName="Cols" AutoPostback="True" runat="server" /> Three<br />
  Layout Direction:
  <ASP:RadioButton id="Horiz" GroupName="Dir" AutoPostback="True" runat="server" /> Horizontally &nbsp;
  <ASP:RadioButton id="Vert" GroupName="Dir" AutoPostback="True" runat="server" /> Vertically<p />
</form>

<ASP:DataList id="MyDataList" runat="server" RepeatLayout="Table">

  <HeaderTemplate>
    <div class="rHead">
      Some of the Latest Wrox Press Books
    </div>
    <img src="images/redrule.gif">
  </HeaderTemplate>

  <ItemTemplate>
    <span>
      <img src="images/<%# Container.DataItem %>" />
    </span>
  </ItemTemplate>

  <FooterTemplate>
    <img src="images/redrule.gif">
    <div class="rFoot">
      For more information visit <a href="http://www.wrox.com">http://www.wrox.com</a>
    </div>
  </FooterTemplate>

</ASP:DataList><p />

<!--------------------------------------------------------------------------->

<script language="vb" runat="server">

Sub Page_Load()

   If Page.IsPostBack Then

      'set the number of columns to display
      If Cols1.Checked = True Then MyDataList.RepeatColumns = 1
      If Cols2.Checked = True Then MyDataList.RepeatColumns = 2
      If Cols3.Checked = True Then MyDataList.RepeatColumns = 3

      'set the repeat direction of the items in the columns
      If Horiz.Checked = True Then MyDataList.RepeatDirection = RepeatDirection.Horizontal
      If Vert.Checked = True Then MyDataList.RepeatDirection = RepeatDirection.Vertical

   Else

      'create an ArrayList of values to bind to
      'only do this the first time the page is loaded as
      'the data is held in the VIEWSTATE for postbacks
      Dim arrValues As New ArrayList(6)
      arrValues.Add("appcenter.gif")
      arrValues.Add("aspplus.gif")
      arrValues.Add("aspxml.gif")
      arrValues.Add("components.gif")
      arrValues.Add("webmaster.gif")
      arrValues.Add("asp3.gif")

      'bind the ArrayList to the DataList control
      MyDataList.DataSource = arrValues
      MyDataList.DataBind()

      'set default columns and direction when page first loads
      Cols2.Checked = True
      MyDataList.RepeatColumns = 2
      Horiz.Checked = True
      MyDataList.RepeatDirection = RepeatDirection.Horizontal

   End If

End Sub

</script>

<!--------------------------------------------------------------------------->
<hr /><span class="cite">[<a href="../global/viewsource.aspx">view source</a>] &nbsp; &nbsp; &nbsp; &nbsp;
&copy;2001 <a class="cite" href="http://www.wrox.com/">Wrox Press</a> -
<a class="cite" href="http://www.wrox.com/Books/Book_Details.asp?isbn=1861004885">Professional ASP.NET</a> (ISBN: 1-861004-88-5)</span>
</body>
</html>
